<template>
<div class="popWindow" v-if="pop!=0" @click="(pop!=1&&pop!=2&&pop!=3)?pop=0:''">
  <canvas ref="oCvs"></canvas>
  <div class="play qq" v-if="pop==1" @click="helpStartFn">
    <div class="money c02">
      <p>最高领取</p>
      <em>{{maxMoney}}</em>
      <span>元</span>
    </div>
  </div>
  <div class="shareShow" v-if="pop==2" @click.stop>
    <div class="title">
      <h2>快来帮我点一点</h2>
      <p>助我一臂之力吧</p>
    </div>
    <div class="user">
      <img :src="userInfo.face"/>
      <div class="hint">{{userInfo.nickname}} 的助力邀请</div>
    </div>
    <button class="btnStyle btn3" @click="dohelpFn">为Ta助力</button>
  </div>
  <div class="shareOpen" v-if="pop==3" @click.stop>
    <div class="hint">获取800元基本助学金</div>
    <dl class="money">
      <dd>
        <p>为Ta助力</p>
        <em>{{dohelpMoney}}</em>
      </dd>
      <dd>
        <p>自己获得</p>
        <em>800.00</em>
      </dd>
    </dl>
    <button class="btnStyle btn3" @click="shareOpenFn">我也要参加</button>
  </div>
  <div class="rule" v-if="pop==4" @click.stop>
    <div class="close" @click="pop=0"></div>
    <h2>助力规则</h2>
    <div class="cont" v-html="ruleText">
      <p>1、郑重承诺：助学金领取真实有效，无任何消费陷阱，总金额800元-5000元不等随机领取。</p>
      <p>2、规定时间内可有效转发领取6次，每次获得随机助学金额，单个账号6次叠加总金额只能一位客户使用。</p>
      <p>3、助学金限用于初三毕业生升学至中职或技工学校学杂费用直接抵扣。每所中职或技工学校助学金名额有限，如名额满了则随机安排名额未满的学校使用。</p>
      <p>4、如用户以任何不正当方式或作弊手段参与本次活动，一经发现，将取消用户的助学金使用权限。</p>
      <p>5、如因不可抗力或情势变更等因素导致本活动无法继续举办的，本公司可决定暂停或终止本活动，并可依相关法律规定主张免责。</p>
      <p>6、助学费用由本公司公益资金承担，与中职/技工学校无关。</p>
      <p>7、如有疑问，请与人工客服咨询领取流程。活动最终司法解释权归本公司所有。</p>
    </div>
    <button class="btnStyle btn1" :class="{'out':itmeNum>0}" v-if="isRuleAgree" @click="pop=7">{{itmeNum>0?itmeNum+'秒后确认兑换':'确认兑换'}}</button>
  </div>
  <div class="share" v-if="pop==5">
    <div class="top"></div>
    <div class="ro"></div>
    <button class="btnStyle getImg" @click.stop="shareImgFn">
      <p>
        生成海报发布到<br/>
        朋友圈邀好友助力
      </p>
    </button>
  </div>
  <div class="shareImg" v-if="pop==6">
    <img :src="shareImg" @click.stop/>
    <p>长按图片保存到相册，发给朋友</p>
  </div>
  <div class="shareForm" v-if="pop==7" @click.stop>
    <h2>兑换资料</h2>
    <p>留下您需兑换助学金的信息我们将在3个工作日内为您办理</p>
    <ul>
      <li><input type="text" v-model="form.realname" placeholder="学生姓名"></li>
      <li><input type="text" v-model="form.city" placeholder="就读市县"></li>
      <li><input type="text" v-model="form.school" placeholder="毕业学校"></li>
      <li><input type="text" v-model="form.mobile" placeholder="联系电话"></li>
      <li><input type="text" v-model="form.account" placeholder="学生QQ号码"></li>
      <li><input type="text" v-model="form.to_school" placeholder="升高中/职校"></li>
    </ul>
    <button class="btnStyle btn1" @click="exchangeFn">确认</button>
  </div>
  <div class="contactUs" v-if="pop==8" @click.stop>
    <h2>联系我们</h2>
    <img src="https://www.hnedunav.com/upload/202003/31/20200331155842043B.png"/>
    <p>长按识别二维码</p>
  </div>
</div>
</template>

<script>
import shareImg from '@img/sharePoster.png';
export default{
  data(){
    return{
      pop:0,
      form:{
        realname:'',
        city:'',
        school:'',
        mobile:'',
        to_school:'',
        account:'',
        helpid:''
      },
      oImg:new Image(),
      oQrCodeImg:new Image(),
      oCvs:'',
      oCtx:'',
      shareImg:'',
      isRuleAgree:false,
      itmeNum:9,
      oTime:null,
      dohelpMoney:0,
      userInfo:''
    }
  },
  props:['popPlay','ruleText','qrCode','helpid','maxMoney'],
  watch:{
    pop(to){
      if(to==0){
        clearInterval(this.oTime);
        this.itmeNum=9;
      }
    }
  },
  mounted(){
    if(this.popPlay){
      this.pop=1
    };
    if(this.$route.query.code){
      this.api.forhelp({code:this.$route.query.code}).then(res=>{
        this.userInfo=res.data.data.info;
        this.$emit('userInfoFn',this.userInfo);
        if(this.userInfo.state==1){
          this.pop=0;
        }
      });
    }
  },
  methods:{
    shareOpenFn(){
      this.api.helpStart().then(res=>{
        this.pop=0;
        Toast(res.data.msg);
        this.$router.push({name:'home'});
        window.location.reload();
      });
    },
    dohelpFn(){
      this.api.dohelp({
        code:this.$route.query.code
      }).then(res=>{
        this.pop=3;
        this.dohelpMoney=res.data.data.amount;
      });
    },
    ruleAgreeFn(){
      this.pop=4;
      this.isRuleAgree=true;
      if(this.itmeNum>0){
        this.oTime=setInterval(()=>{
          this.itmeNum--;
        },1000);
      }
    },
    exchangeFn(){
      this.form.helpid=this.helpid;
      this.api.exchange(this.form).then(res=>{
        this.itmeNum=9;
        this.$router.push({name:'order'});
      });
    },
    helpStartFn(){
      this.api.helpStart().then(res=>{
        this.pop=0;
        Toast(res.data.msg);
        this.$emit('helpStart');
        window.location.reload();
      });
    },
    shareImgFn(){
      this.pop=6;
      this.oImg.src=shareImg;
      this.oCvs=this.$refs.oCvs;
      this.oCtx=this.oCvs.getContext("2d");
      this.oImg.onload=()=>{
        this.oCvs.width=600;
        this.oCvs.height=800;
        this.oCtx.drawImage(this.oImg,0,0,600,800);
        this.oCtx.fillStyle='#4E4E4E';
        this.oCtx.font="24px Arial";
        this.oCtx.textBaseline="top";
        this.oCtx.fillText("你的好友 ",38,610);
        this.oCtx.fillText("邀您帮TA赚助学金 ",38,650);
        this.oCtx.font="18px Arial";
        this.oCtx.fillText("长按识别二维码",438,748);
        this.oQrCodeImg.src=this.qrCode;
        this.oQrCodeImg.onload=()=>{
          this.oCtx.drawImage(this.oQrCodeImg,440,610,120,120);
          this.shareImg=this.oCvs.toDataURL("image/png");
        }
      }
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
.popWindow{
  canvas{
    position:absolute;
    width:0;
    height:0;
    opacity:0;
  }
  .play{
    width:100%;
    height:592px;
    background:url($imgUrl+'playPop.png');
    background-size:100% 100%;
    overflow:hidden;
    position:relative;
    &.qq{
      &:before{
        content:'';
        position:absolute;
        width:70px;
        height:70px;
        right:120px;
        top:450px;
        background:url($imgUrl+'QQ.png');
        background-size:100% 100%;
      }
    }
    .money{
      margin-top:76px;
      display:flex;
      justify-content: center;
      transform: rotate(-3deg);
      align-items: center;
      p{
        width:2em;
        padding-right:10px;
        line-height:1.1;
        font-size:24px;
        font-weight:bold;
      }
      em{
        font-size:110px;
        line-height:1;
      }
      span{
        padding-left:10px;
        font-size:40px;
        font-weight:bold;
      }
    }
  }
  .shareShow{
    width:560px;
    height:560px;
    background:url($imgUrl+'share.png');
    background-size:100% 100%;
    color:#FFFBD2;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .title{
      h2{
        font-size:34px;
        font-weight:bold;
      }
      p{
        font-size:28px;
      }
    }
    .user{
      margin-top:30px;
      img{
        background-color:#FFF;
        width:120px;
        height:120px;
        border-radius:50%;
        border:8px solid #FFF;
      }
      .hint{
        margin-top:30px;
        background:#F34241;
        line-height:44px;
        padding:0 20px;
        border-radius:99em;
        position:relative;
        &:before{
          content:'';
          border:10px solid transparent;
          border-bottom-color:#F34241;
          position:absolute;
          top:-20px;
          left:50%;
          transform:translateX(-50%);
        }
      }
    }
    .btn3{
      margin-top:30px;
    }
  }
  .shareOpen{
    width:560px;
    height:596px;
    box-sizing: border-box;
    background:url($imgUrl+'shareOpen.png');
    background-size:100% 100%;
    color:#FFFBD2;
    padding-top:100px;
    .hint{
      opacity:0.6;
      color:#FFF;
      display:flex;
      justify-content: center;
      align-items: center;
      &:after,&:before{
        content:'';
        width:40px;
        height:2px;
        background-color:#FFF;
        margin:0 16px;
      }
    }
    .money{
      margin:0 24px;
      height:300px;
      display:flex;
      justify-content: space-around;
      align-items: center;
      dd{
        flex:1;
      }
      p{
        color:#E9B66D;
        font-size:20px;
      }
      em{
        display:block;
        padding-top:10px;
        color:$c02;
        font-size:50px;
      }
    }
    .btn3{
      margin-top:30px;
    }
  }
  .rule{
    width:100%;
    margin:auto 0 0;
    background-color:#FFF;
    border-radius:40px 40px 0 0;
    padding-bottom:40px;
    position:relative;
    .close{
      position:absolute;
      width:40px;
      height:40px;
      background:url($imgUrl+'popClose.png');
      background-size:100% 100%;
      right:40px;
      top:40px;
    }
    h2{
      line-height:130px;
      font-size:40px;
      display:flex;
      justify-content: center;
      align-items: center;
      &:after,&:before{
        content:'';
        width:32px;
        height:26px;
        background-size:100% 100%;
        margin:0 20px;
      }
      &:before{
        background-image:url($imgUrl+'titleIcoL.png');
      }
      &:after{
        background-image:url($imgUrl+'titleIcoR.png');
      }
    }
    .cont{
      font-size:26px;
      text-align:left;
      width:90%;
      margin:auto;
      max-height:70vh;
      min-height:50vh;
      overflow:auto;
      p{
        padding-bottom:20px;
      }
    }
    .btnStyle{
      margin-top:30px;
    }
  }
  .share{
    width:100%;
    margin:40px 0 auto 0;
    display:flex;
    flex-direction: column;
    .top{
      width:376px;
      height:204px;
      background:url($imgUrl+'shareTop.png');
      background-size:100% 100%;
      margin-left:auto;
    }
    .ro{
      width:120px;
      height:120px;
      background:url($imgUrl+'orIco.png');
      background-size:100% 100%;
      margin:120px auto 0;
    }
    .getImg{
      background-color:#FFF;
      margin:120px auto 0;
      border-radius:99em;
      display:flex;
      align-items: center;
      justify-content: center;
      width:500px;
      height:160px;
      text-align:left;
      font-size:32px;
      &:before{
        content:'';
        width:81px;
        height:74px;
        background:url($imgUrl+'shareImgBtn.png');
        background-size:100% 100%;
        margin-right:30px;
      }
    }
  }
  .shareImg{
    img{
      width:640px;
    }
    p{
      margin-top:50px;
      line-height:50px;
      background-color:rgba(#000,0.5);
      border-radius:99em;
      font-size:24px;
      padding:0 20px;
      color:#FFF;
    }
  }
  .shareForm,.contactUs{
    border-radius:10px;
    background-color:#FFF;
    padding:30px;
    h2{
      font-size:36px;
      font-weight:bold;
      padding-bottom:20px;
    }
    p{
      width:18em;
      margin:-10px auto 30px;
    }
    ul{
      padding-bottom:30px;
      li{
        margin-bottom:10px;
        input{
          border:1px solid #EEE;
          background-color:#fafafa;
          border-radius:6px;
          width:400px;
          height:50px;
          text-align:center;
        }
      }
    }
    img{
      width:400px;
    }
  }
}
</style>
